<template>
    <div class="container">
        <a-button type="primary" @click="add" style="margin-bottom:20px;">添加弹幕计划</a-button>
        <standard-table
            rowKey="url"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
            :loading="table_loading"
            :scroll="{x:1200}"
        >
            <div slot="url" slot-scope="{record}">
                <!-- <div v-if="record.isZhiBoIng">
                    {{record.url}}
                </div> -->
                <div>
                    <a-input placeholder="请输入直播间地址" v-model="record.url"/>
                </div>
            </div>
            <div slot="danmuName" slot-scope="{record}" @click="openChooseDanmu(record.url)">
                <a href="javascript:;" v-if="record.danmuName != ''">{{record.danmuName}}</a>
                <a href="javascript:;" v-else >选择弹幕</a>
            </div>
            <div slot="bdussName" slot-scope="{record}" @click="openChooseBduss(record.url)">
                <a href="javascript:;" v-if="record.bdussName != ''">{{record.bdussName}}</a>
                <a href="javascript:;" v-else >选择账号</a>
            </div>
            <div slot="huifubduss" slot-scope="{record}" @click="openChooseHuifubduss(record.url)">
                <div v-if="record.huifuBduss != ''" >
                    <span>{{record.zhuboName}}</span>
                    <a href="javascript:;" class="line3">{{record.huifuBduss}}</a>
                </div>
                <a href="javascript:;" v-else >选择回复BDUSS</a>
            </div>
            <div slot="loop" slot-scope="{record}">
                <a-input placeholder="请输入循环次数"  v-model="record.loop"/>
            </div>
            <div slot="time" slot-scope="{record}" style="display:flex;align-items: center;">
                <a-input v-model="record.minTime" /> - <a-input v-model="record.maxTime" />
            </div>
            <div slot="huifu" slot-scope="{record}">
                <a-switch v-model="record.huifu" />
            </div>
            <div slot="action" slot-scope="{record}" >
                <a-popconfirm title="确定发送？" ok-text="发送" cancel-text="取消" @confirm='sendDanmu(record.url)' >
                    <a-button type="link" ghost :loading="sendDanmu_loading" style="color:#1890ff;">
                        <a-icon type="youtube" v-if="!sendDanmu_loading" />发送弹幕
                    </a-button>
                </a-popconfirm>
                <a-popconfirm title="确定关闭？" ok-text="关闭" cancel-text="取消" @confirm='closeDanmu(record.url)'>
                    <a-button type="link" ghost :loading="stopDanmu_loading" style="color:#1890ff;">
                        <a-icon type="delete" v-if="!stopDanmu_loading" />关闭弹幕
                    </a-button>
                </a-popconfirm>
            </div>
        </standard-table>
        <a-modal :width='1300' title="选择弹幕" v-model="showChooseDanmu" :footer="null">
            <danmuList v-model="showChooseDanmu" @success='getDanmuName'/>
        </a-modal>
        <a-modal :width='800' title="选择账号" v-model="showChooseBduss" :footer="null">
            <bdussList v-model="showChooseBduss" @success='getBdussName' />
        </a-modal>
        <a-modal :width='1200' title="选择回复BDUSS" v-model="showChooseHuifubduss" :footer="null">
            <huifubdussList v-model="showChooseHuifubduss" @success="getHuifuBduss"/>
        </a-modal>
    </div>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import danmuList from './danmuList'
import bdussList from './bdussList'
import huifubdussList from './huifubdussList'
import { sendDanmuPRO,getDanmuList,stopDanmu } from '@/api/zhibo/baidu'
const dataSourceTemplate = {
    url:'',
    oldUrl:'',
    danmuName:'',
    bdussName:'',
    huifuBduss:'',
    zhuboName:'',
    loop: 100000,
    minTime: 25,
    maxTime: 35,
    huifu: true,
    isZhiBoIng:false
}
export default {
    data() {
        return {
            columns:[
                {
                    title: '直播间地址',
                    dataIndex: 'url',
                    width:600,
                    scopedSlots: { customRender: 'url' }
                },
                {       
                    title: '弹幕配置',
                    dataIndex: 'danmuName',
                    width:150,
                    scopedSlots: { customRender: 'danmuName' }
                },
                {       
                    title: '账号配置',
                    dataIndex: 'bdussName',
                    width:150,
                    scopedSlots: { customRender: 'bdussName' }
                },
                {       
                    title: '回复账号配置',
                    dataIndex: 'huifubduss',
                    width:300,
                    scopedSlots: { customRender: 'huifubduss' }
                },
                {       
                    title: '循环次数',
                    dataIndex: 'loop',
                    width:120,
                    scopedSlots: { customRender: 'loop' }
                },
                {       
                    title: '设置时间',
                    width:240,
                    scopedSlots: { customRender: 'time' }
                },
                {       
                    title: '开启回复',
                    width:100,
                    scopedSlots: { customRender: 'huifu' }
                },
                {
                    title: '操作',
                    width:300,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            table_loading:false,

            dataSource:[],
            checkUrl:'', //当前正在选配置时的url

            showChooseDanmu: false,
            chooseDanmu_confirmLoading: false,

            showChooseBduss:false,
            chooseBduss_confirmLoading: false,

            showChooseHuifubduss:false,
            chooseHuifubduss_confirmLoading: false,

            sendDanmu_loading:false,
            stopDanmu_loading:false,
        }
    },
    created(){
        this.getDanmuList()
    },
    methods:{
        getDanmuList(){
            this.table_loading = true
            getDanmuList({}).then((res)=>{
                this.table_loading = false
                if(res.errcode == 200){
                    for(let item of res.data){
                        item.isZhiBoIng = true
                    }
                    this.dataSource = res.data
                }
            }).catch(()=>{
                this.table_loading = false
            })
        },
        sendDanmu(url){
            let item = this.dataSource.find(e=>e.url == url)
            this.sendDanmu_loading = true
            console.log('sendDanmu-item',item)
            if(item){
                sendDanmuPRO(item).then((res)=>{
                    console.log(res)
                    this.sendDanmu_loading = false
                    if(res.errcode == 200){
                        this.$message.success(res.errmsg)
                        this.getDanmuList()
                    }
                }).catch(()=>{
                    this.sendDanmu_loading = false
                })
            }
        },
        closeDanmu(url){
            this.stopDanmu_loading = true
            let params = {
                url,
            }
            stopDanmu(params).then(() => {
                this.stopDanmu_loading = false
                this.getDanmuList()
            }).catch(() => {
                this.stopDanmu_loading = false
            });
        },
        add(){
            let tmp = JSON.parse(JSON.stringify(dataSourceTemplate))
            this.dataSource.push(tmp)
        },
        getHuifuBduss(res){
            let item = this.findByCheckUrl()
            if(item){
                item['huifuBduss'] = res.huifuBduss,
                item['zhuboName'] = res.zhuboName
            }
            this.showChooseHuifubduss = false
        },
        getBdussName(name){
            let item = this.findByCheckUrl()
            if(item){
                item['bdussName'] = name
            }
            this.showChooseBduss = false
        },
        getDanmuName(name){
            let item = this.findByCheckUrl()
            if(item){
                item['danmuName'] = name
            }
            this.showChooseDanmu = false
        },
        openChooseDanmu(url){
            if(this.setCheckUrl(url)){
                this.showChooseDanmu = true
            }
        },
        openChooseBduss(url){
            if(this.setCheckUrl(url)){
                this.showChooseBduss = true
            }
        },
        openChooseHuifubduss(url){
            if(this.setCheckUrl(url)){
                this.showChooseHuifubduss = true
            }
        },
        findByCheckUrl(){
            let url = this.checkUrl
            return this.dataSource.find(e=>e.url == url)
        },
        setCheckUrl(url){
            if(url != ''){
                this.checkUrl = url
                return true
            }else{
                this.$message.error('请先填写直播间url')
                return false
            }
        },
    },
    components:{StandardTable,danmuList,bdussList,huifubdussList}
}
</script>

<style lang="less" scoped>
.container{
    padding: 20px;
}
.line3{
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3; 
    overflow: hidden;
}
</style>